<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>评论</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		#box{
			margin: 100px auto;
			width: 650px;
			height: 200px;
		}
		#text_box{
			text-align: center;
		}
		.del{
			float: right;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="text_box">
			<textarea name="comment" id="comment" cols="80" rows="6" placeholder="请输入..."></textarea>
			<button id="btn">提交</button>
		</div>
		<ul id="comment_list">
			评论内容
		</ul>
	</div>
	<script>
		window.onload = function(){
			function $(id_name){
            return typeof id_name === 'string' ? document.getElementById(id_name) : null;
        }
		$('btn').onclick = function(){
			var new_commant = document.createElement('li')
			var new_text = $('comment').value
			if(new_text === ''){
				alert('请输入..')
			}else{
				new_commant.innerHTML = `${new_text}<a href="javascript:void(0);" class="del">Delete</a><hr>`
				$('comment_list').insertBefore(new_commant,$('comment_list').children[0]);
				$('comment').value = ''
			}
		}
		var del_list = document.getElementsByTagName('a');
		for(var i = 0; i<del_list.length;i++){
			del_list[i].onclick = function(){
			this.parentNode.remove();
		}
		}
		}
	</script>
</body>
</html>